<template>
	<view class="content">
		<!-- 可用金额开始 -->
		<view class="money padding">可提现金额: {{ userInfo.money }}</view>
		<!-- 可用金额结束 -->

		<!-- 体现区域开始 -->
		<view class="withdraw padding">
			<navigator url="/pages/bank/bank?source=1" class="address-section">
				<!-- 用户名字 -->
				<view class="withdraw-name">{{ typeid_array[bankInfo.typeid] }}</view>
				<!-- 发卡行 -->
				<view class="withdraw-account" v-if="bankInfo.typeid == 0"><input type="text" :value="bankInfo.bankname" placeholder="请输入发卡行" /></view>
				<!-- 姓名 -->
				<view class="withdraw-name"><input type="text" :value="bankInfo.username" placeholder="请输入姓名" /></view>
				<!-- 账号 -->
				<view class="withdraw-account"><input type="text" :value="bankInfo.bankno" placeholder="请输入提现账号" /></view>
			</navigator>
		</view>
		<!-- 体现区域结束 -->

		<!-- 提现金额 -->
		<view class="withdraw-money">
			<view class="text">提现金额</view>
			<view class="withdraw-money-input"><input type="number" :value="money" placeholder="请输入提现金额" data-key="money" @input="inputChange" /></view>
			<view class="clickall" @click="all">点击全部</view>
		</view>

		<!-- 提现时间通知开始 -->
		<view class="time padding">{{withdrawalinfo.description}}</view>
		<!-- 提现时间通知结束 -->

		<view class="exit-button"><text class="exit-button-text" @tap="openModal" :disabled="submiting">提交审核</text></view>
		
		<view>
			<payKeyboard v-if="showKeyBoard" title="安全键盘" @success="enterSuccess" @close="close"></payKeyboard>
		</view>
		
	</view>
</template>
<script>
import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'	
export default {
	components: { payKeyboard },
	data() {
		return {
			token: '',
			userInfo: {},
			withdrawalinfo: {},
			typeid_array: ['储蓄卡'],
			money: 0,
			bankInfo: {
				id: 0,
				typeid: 0,
				bankname: '',
				username: '',
				bankno: ''
			},
			submiting: false,
			
			showKeyBoard: false,
		};
	},
	onLoad() {
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo({
				url: '/pages/public/login'
			});
			return;
		}
	},
	onShow(){
		//获取用户信息
		this.getmedate();	
		//获取提现信息
		this.getwithdrawalinfo();	
	},
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 0) {
			this.navTo('/pages/money/withdrawlist');
		}
	},
	methods: {
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			if (!this.token) {
				url = '/pages/public/login';
			}
			uni.navigateTo({
				url
			});
		},
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this[key] = e.detail.value;
		},
		//点击全部金额结算
		all() {
			this.money = this.userInfo.money;
		},
		//获取用户信息
		async getmedate() {
			const param = {
				token: this.token
			};
			await this.$http.request('User', 'userinfo', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.userInfo = res.data.data;
						if (res.data.data.bankinfo) {
							this.bankInfo = res.data.data.bankinfo;
						}
					}
				}
			});
		},
		//获取提现信息
		async getwithdrawalinfo() {
			const param = {
				token: this.token
			};
			await this.$http.request('User', 'withdrawalinfo', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.withdrawalinfo = res.data.data;
					}
				}
			});
		},
		
		// 打开输入框
		openModal() {
			const { money } = this;
			
			let regpr = /^[1-9][0-9]+$/;
			if (!regpr.test(money)) {
				this.$helper.toast('数量格式错误');
				this.submiting = false;
				return;
			}
			
			this.showKeyBoard = true;
			this.submiting = false;
		},
		// 输入正确的回调
		enterSuccess(password) {
			console.log(password) // 输入的密码
			this.showKeyBoard = false;
			this.toSubmit(password);
		},
		// 点击[取消] 关闭输入框 的回调
		close(){
			this.showKeyBoard = false;
			this.submiting = false;
		},
		
		//提交审核
		toSubmit(password) {
			this.submiting = true;

			/* 数据验证模块*/
			if (this.bankInfo.id == 0) {
				this.$helper.toast('选择提现账户', '', '/static/toast/fail-circle.png');
				this.submiting = false;
				return;
			}

			if (!this.money) {
				this.$helper.toast('输入提现金额', '', '/static/toast/fail-circle.png');
				this.submiting = false;
				return;
			}
			
			const param = {
				token: this.token,
				money: this.money,
				bankid: this.bankInfo.id,
				paypassword: password,
			};
			this.$http.request('User', 'withdrawal', 'POST', param, res => {
				this.submiting = false;
				if (res.status == 1) {
					if (res.data.error == 0) {
						// 认证成功
						this.$helper.toast('提现成功', 'sucess');
						//返回前一页
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/money/money'
							});
						}, 500);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	// 默认字体
	font-size: 30upx;

	// 左右间距
	.padding {
		padding: 0 30upx;
	}

	//可用金额开始
	.money {
		height: 100upx;
		background-color: #ff0000;
		display: flex;
		align-items: center;
		font-weight: 700;
		color: #ffffff;
	}

	// 提现区域开始
	.withdraw {
		margin-top: 20upx;
		background-color: #fff;

		// 用户账户
		.withdraw-account {
			height: 100upx;
			border-bottom: 1px solid #f6f6f6;
			display: flex;
			align-items: center;
		}

		// 用户名字
		.withdraw-name {
			height: 100upx;
			border-bottom: 1px solid #f6f6f6;
			display: flex;
			align-items: center;
		}
	}

	// 提现区域结束

	// 用户提现金额
	.withdraw-money {
		background-color: #f0ad4e;
		padding: 10upx 20upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;

		.text {
			padding: 0upx 20upx;
		}

		.withdraw-money-input {
			font-size: 50upx;
			line-height: 50upx;
			display: flex;
			justify-content: space-between;

			input {
				width: 400upx;
				height: 60upx;
				background-color: #dd524d;
				padding: 0upx 20upx;
				color: #fff;
			}

			input::-webkit-input-placeholder{
				color: #fff;
			}
			input::-moz-placeholder{ /* Mozilla Firefox 19+ */
				color: #fff;
			}
			input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
				color: #fff;
			}
			input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ 
				color: #fff;
			}
		}

		.clickall {
			padding: 0upx 0upx 0upx 10upx;
			color: #f5f5f5;
		}
	}

	// 提现通知时间开始
	.time {
		margin-top: 20upx;
		color: #666666;
		font-size: 24upx;
	}
	// 提现通知时间接收

	/* exit-button */
	.exit-button {
		height: 100upx;
		display: flex;
		background-color: red;

		border-radius: 15upx;
		padding: 2upx;
		margin: 40upx 20upx;
		align-items: center;
		justify-content: center;
	}

	.exit-button-text {
		font-size: 36upx;
		color: #ffffff;
		font-weight: bold;
	}
}
</style>
